<template>
<div class="container">
    <div class="top-bt">
        <el-button type="back" icon="el-icon-arrow-left" @click="GoBack">返回</el-button>
        <el-button type="Submit" @click="submit">提交</el-button>
    </div>
    <div class="body-box">
        <h1>编辑轮播页配置</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--输入框-->
            <el-form-item label=" 标题：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="这里是轮播标题" type="text" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <!--本地图片选择-->
            <div class="pic-box">
                <h1 class="h1-1">选择图片：</h1>
                <el-upload class="sssss" action list-type="picture-card" :file-list="fileList" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-change="handleChange">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt />
                </el-dialog>
            </div>
            <!--图片提示文字及边框-->
            <div class="flex-box">
                <div class="pic-Tips">
                    <h1>1.请上传PNG、JPG或者JPEG图片，大小不超过10MB; ;</h1>
                    <h1>2.图片尺寸约为1200*120px；</h1>
                </div>
            </div>
            <!--输入框-->
            <el-form-item label="  来源：" prop="source">
                <el-input v-model="ruleForm.source" placeholder="请输入来源" type="text" maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <!--时间选择输入框-->
            <el-form-item label="  发布时间：" prop="publishTime">
                <el-date-picker v-model="ruleForm.publishTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" clear-icon>
                </el-date-picker>
            </el-form-item>
            <!-- 富文本编辑器组件 -->
            <!-- <Editor v-model="text"></Editor> -->
            <div class="text-editor-box">
                <h1 class="h1-2">内容：</h1>
                <quill-editor v-model="ruleForm.text" ref="QuillEditor" :options="editorOption" />
                <div class="bt-group">
                    <Before-looking :ruleForm="ruleForm"></Before-looking>
                </div>
            </div>
        </el-form>
    </div>
    <el-dialog title="上传图片" :visible.sync="dialogVisible1" width="25%">
        <div class="upload-title">请选择你要上传的图片</div>
        <Upload v-if="dialogVisible1" :ruleForm.sync="uploadRuleForm"></Upload>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
// import Preview from '@/components/preview/Preview.vue'
import Upload from "@/components/Upload/Upload.vue";
import Back from "@/components/Popup/Back";
import BeforeLooking from "@/components/Looking/BeforeLooking";

export default {
    components: {
        Upload,
        Back,
        BeforeLooking,
    },
    data() {
        const _this = this;
        const toolbarOptions = [
            ["bold", "italic", "underline", "strike"], // toggled buttons
            ["blockquote", "code-block"],

            [{
                    header: 1,
                },
                {
                    header: 2,
                },
            ], // custom button values
            [{
                    list: "ordered",
                },
                {
                    list: "bullet",
                },
            ],
            [{
                    script: "sub",
                },
                {
                    script: "super",
                },
            ], // superscript/subscript
            [{
                    indent: "-1",
                },
                {
                    indent: "+1",
                },
            ], // outdent/indent
            [{
                direction: "rtl",
            }, ], // text direction

            [{
                size: ["small", false, "large", "huge"],
            }, ], // custom dropdown
            [{
                header: [1, 2, 3, 4, 5, 6, false],
            }, ],

            [{
                    color: [],
                },
                {
                    background: [],
                },
            ], // dropdown with defaults from theme
            [{
                font: [],
            }, ],
            [{
                align: [],
            }, ],
            ["link", "image", "video"],
            ["clean"], // remove formatting button
        ];
        return {
            //富文本
            activeHtmlName: "pc",
            length: null,
            dialogVisible1: false,
            uploadRuleForm: {},
            publishTime: "",
            picPace: "",
            dialogImageUrl: "",
            //控制图片是否课件
            dialogVisible: false,
            //控制按钮是否课件
            disabled: false,
            fileList: [],
            //审核不通过挂在处
            com: "Back",
            ruleForm: {
                name: "",
                source: "",
                type: [],
                text: "",
                publishTime: "",
            },
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            image: function (value) {
                                if (value) {
                                    _this.dialogVisible1 = true;
                                    let quill = _this.$refs.QuillEditor.quill;
                                    _this.length = quill.getSelection().index;
                                    // alert("自定义图片");
                                } else {
                                    this.quill.format("image", false);
                                }
                            },
                        },
                    },
                },
            },
            rules: {
                name: [{
                    required: true,
                    message: "请输入标题",
                    trigger: "blur",
                }, ],
                source: [{
                    required: true,
                    message: "请输入来源",
                    trigger: "blur",
                }, ],
                publishTime: [{
                    required: true,
                    message: "请选择发布时间",
                    trigger: "change",
                }, ],
            },
        };
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    created() {
        this.gettRotationBianJi();
    },
    watch: {
        uploadRuleForm(n) {
            this.handleSuccess(this.baseUrl + n.pic);
        },
    },
    methods: {
        handleSuccess(res) {
            this.dialogVisible1 = false;
            console.log(res, "res11111");
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill;
            console.log(quill, "quill");
            console.log(quill.getSelection(), "getSelection");
            // 如果上传成功
            if (res) {
                // 获取光标所在位置
                let length = this.length;
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, "image", res);
                // 调整光标到最后
                quill.setSelection(length + 1);
                console.log(this.ruleForm.context, "context")
            } else {
                // 提示信息，需引入Message
                Message.error("图片插入失败");
            }
        },
        //   返回
        GoBack() {
            this.$router.go(-1);
        },
        // 提交
        submit() {
            this.Api.getRotationSubmit({
                context: this.ruleForm.text,
                source: this.ruleForm.source,
                id: this.$route.query.id,
                title: this.ruleForm.name,
                url: this.picPace,
                publishTime: this.ruleForm.publishTime,
            }).then((res) => {
                console.log(res, 1111)
                this.$router.go(-1);
            });
        },
        //请求数据编辑接口查询渲染
        gettRotationBianJi() {
            // console.log(this.$route.params.id, 121212);
            this.Api.getRotationBianJi({
                id: this.$route.query.id,
            }).then((res) => {
                console.log(res)
                this.$set(this.ruleForm, "name", res.data.title);
                this.$set(this.ruleForm, "source", res.data.source);
                this.$set(this.ruleForm, "text", res.data.context);
                this.$set(this.ruleForm, "publishTime", res.data.publishTime);
                this.picPace = res.data.url;
                // console.log(this.ruleForm.name,111)
                this.fileList.push({
                    url: this.baseUrl + res.data.url
                })
            });
        },
        //图片上传的方法
        handleChange(file, fileList) {
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                // console.log(file, fileList);
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData,111)
                this.Api.uploadImage(formData).then((res) => {

                    console.log(res, 111);
                    this.picPace = res.data.url;
                    this.fileList = []
                    this.fileList.push({
                        url: this.baseUrl + res.data.url
                    })
                });
            }

        },
        handleRemove(file) {
            this.fileList = [];

            // console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传限定图片类型
        beforeAvatarUpload(file) {
            const isJPG = file.type === "png/jpeg/jpg";
            const isLt2M = file.size / 180 / 52 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是png/jpeg/jpg格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小约为180*52!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    padding: 0;

    .top-bt {
        display: flex;
        justify-content: space-between;
        background: rgba(240, 242, 245, 1);
        padding-bottom: 20px;

        .el-button--back {
            width: 70px;
            height: 36px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(221, 221, 221, 1);
            color: rgba(51, 51, 51, 1);
            padding: 0;
        }

        .el-button--Submit {
            width: 70px;
            height: 36px;
            background: rgba(61, 127, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(221, 221, 221, 1);
            color: #ffffff;
            padding: 0;
        }
    }

    .body-box {
        >h1 {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #e4e7ed;
            margin-bottom: 20px;
        }

        .el-form {
            margin-top: 20px;
            padding-left: 41px;
        }
    }
}

// 富文本编辑器
.text-editor-box {
    display: flex;

    .h1-2 {
        width: 85px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: right;
    }

    .h1-2::before {
        content: "* ";
        color: #ff0000;
    }

    /deep/.bt-group {
        display: flex;
        align-items: flex-end;
        position: relative;
    }

    .quill-editor {
        /deep/.ql-container {
            min-height: 20vh;
            height: 200px;
        }
    }
}

/deep/.quill-editor {
    width: 1350px;
    height: 200px;

    .ql-blank {
        padding-left: 0px;
    }

    .ql-containe {
        height: 158px;
    }
}

//form表单
/deep/.el-form {
    .el-form-item {
        margin: 0 0 16px 0;

        .el-form-item__label {
            width: 85px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
        }

        .el-form-item__content {
            margin-left: 85px !important;

            .el-input__inner {
                width: 460px;
                height: 36px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(221, 221, 221, 1);
                padding-left: 12px;
            }
        }
    }

    .pic-box {
        display: flex;
        padding-bottom: 10px;

        .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
        }

        .h1-1::before {
            content: "* ";
            color: #ff0000;
        }
    }

    .flex-box {
        display: flex;

        .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            margin-left: 82px;

            h1 {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 22px;
            }
        }
    }
}

/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
    width: 88px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 88px;
    height: 88px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 19px;
}

/deep/.el-icon-download {
    font-size: 19px;
}

/deep/.el-icon-delete {
    font-size: 19px;
}

.upload-box {
    width: 88px;
    height: 88px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

/deep/.el-upload--picture-card {
    width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 66px;
    height: 66px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 10px;
}

/deep/.el-icon-delete {
    font-size: 10px;
}

.upload-box {
    width: 66px;
    height: 66px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

/deep/.el-upload-list__item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sssss {
    width: 66px;
    height: 66px;
    overflow: hidden;
}

/deep/.el-input__prefix {
    display: none;
}

//图片上传的弹窗样式
/deep/.el-dialog__wrapper {
    .el-dialog {
        border-radius: 8px 8px 0px 0px;

        .el-dialog__header {
            padding: 15px 20px 15px 24px;

            background: #E6E9ED;
            border-radius: 8px 8px 0px 0px;
            border: 1px solid #E6E9ED;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                line-height: 16px;
            }

            .el-dialog__headerbtn {
                top: 15px;
                right: 15px;
            }
        }

        .el-dialog__body {
            padding: 16px 20px 20px 20px;

            .upload-title {
                width: 140px;
                height: 22px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
                margin-bottom: 17px;

            }

        }

        .el-dialog__footer {
            padding-top: 0;

            .dialog-footer {
                .el-button {
                    padding: 10px 18px;
                }
            }
        }
    }
}

.el-input {
    width: 460px;
}
</style>
